<template>
    <div>
        <div class="card">{{recordCount}}人在线</div>
        <div class="card">
            <template v-if="currUser != null">
                <header>
                    <img class="avatar" width="60" height="60" :alt="currUser.getNick()" :src="currUser.getAvatar()">
                    <p class="name">{{currUser.getNick()}}</p>
                </header>
                <footer>
                    <input class="search" type="text" placeholder="search user...">
                </footer>
            </template>
        </div>
    
        <div class="list" id="userlist">
            <ul>
                <li v-for="client in clients" v-bind:alt="client.getRegion() + ' | ' + client.getUseragent()" v-bind:title="client.getRegion() + ' | ' + client.getUseragent()">
                    <img class="avatar" width="50" height="50" v-bind:src="client.getUser().getAvatar()">
                    <p class="name">{{ client.getUser().getNick() }}</p>
                    <!-- <p>{{client.getRegion()}}</p> -->
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

export default {
    name: 'userlist',
    data() {
        return {
            clients: [

            ],
            recordCount: 0, currUser: null
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">
.list {
    overflow-y: auto;
    ul {
        overflow-y: auto;
    }
    li {
        padding: 12px 15px;
        border-bottom: 1px solid #292C33;
        cursor: pointer;
        transition: background-color .1s;

        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        &.active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
    .avatar,
    .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
    }
}














.card {
    padding: 12px;
    border-bottom: solid 1px #24272C;

    footer {
        margin-top: 10px;
    }

    .avatar,
    .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
        font-size: 16px;
    }
    .search {
        padding: 0 10px;
        width: 100%;
        font-size: 12px;
        color: #fff;
        height: 30px;
        line-height: 30px;
        border: solid 1px #3a3a3a;
        border-radius: 4px;
        outline: none;
        background-color: #26292E;
    }
}
</style>